import React, { Component } from 'react'
import '../asserts/css/coupon.css'
import {dataFmt} from '../request/coupon'
import {connect} from 'react-redux'
import {asyncInitAction} from '../redux/coupon/couponAciton'


class coupon extends Component {
    state = {
        index: 0
    }
    UNSAFE_componentWillMount(){
        const userinfo = JSON.parse(localStorage.getItem("loginData") || '{}')
        this.props.initAction(userinfo.uid)
    }
    render() {
        var {index} = this.state
        return (
            <div>
                <div className="coupon-container">
                    <div className="page-title">优惠券</div>
                    <div className="tabs">
                        <div className={index === 0?"active":""} onClick={()=>this.setState({index: 0})}>未使用</div>
                        <div className={index === 1?"active":""} onClick={()=>this.setState({index: 1})}>已使用</div>
                        <div className={index === 2?"active":""} onClick={()=>this.setState({index: 2})}>已失效</div>
                    </div>
                    <div className="list">
                        {
                            this.props.couponList[index].content.map(item=>{
                                return <div className="item" key={item.id}>
                                <div className="content">
                                    <div className="price">
                                        <h2>&yen; <span>{item.money}</span></h2>
                                        <small className="tips">满3元可用</small>
                                    </div>
                                    <div>
                                        <p>{item.title}</p>
                                        <small>{dataFmt(item.begintime)}至{dataFmt(item.endtime)}</small>
                                    </div>
                                </div>
                                <div className="rules">
                                    {item.description}
                                </div>
                            </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

const mapState = state=>{
    return {
        couponList: state.coupon,
    }
}
const mapDispath = dispatch=>{
    return {
        initAction: (id)=>dispatch(asyncInitAction(id))
    }
}

export default connect(mapState,mapDispath)(coupon)